<template>
  <div class="wrap">
    <div class="item-wrap">
      <div v-for="(item,index) in border" :key="index" class="item" @mouseover="coverIndex = index + 1" @mouseleave="coverIndex = 0">
        <div v-if="coverIndex === index + 1" class="item-cover">
          <div class="item-cover-content" @click="copy($event,item.code)">{{ item.code }}</div>
        </div>
        <hzx-border :type="item.type" margin="10">hzx-border</hzx-border>
        <!-- <div style="width: 50%;height: 50%;background-color: red;">hzx-border</div> -->
        <!-- <hzx-border :type="type" :margin="margin" :duration="duration" :reverse="reverse" :border-color="bColor" :bg-color="bgColor"> hzx-border </hzx-border> -->
      </div>
    </div>
  </div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      coverIndex: 0,
      duration: 10,
      bColor: ['#aa0000', '#aa007f'],
      bgColor: '#ededed',
      reverse: true,
      type: 'b-type8',
      margin: '5% 10%',
      border: [
        { type: 'b-type1', code: `<hzx-border type="b-type1"> hzx-border </hzx-border>` },
        { type: 'b-type2', code: `<hzx-border type="b-type2"> hzx-border </hzx-border>` },
        { type: 'b-type3', code: `<hzx-border type="b-type3"> hzx-border </hzx-border>` },
        { type: 'b-type4', code: `<hzx-border type="b-type4"> hzx-border </hzx-border>` },
        { type: 'b-type5', code: `<hzx-border type="b-type5"> hzx-border </hzx-border>` },
        { type: 'b-type6', code: `<hzx-border type="b-type6"> hzx-border </hzx-border>` },
        { type: 'b-type7', code: `<hzx-border type="b-type7"> hzx-border </hzx-border>` },
        { type: 'b-type8', code: `<hzx-border type="b-type8"> hzx-border </hzx-border>` },
        { type: 'b-type9', code: `<hzx-border type="b-type9"> hzx-border </hzx-border>` },
        { type: 'b-type10', code: `<hzx-border type="b-type10"> hzx-border </hzx-border>` },
        { type: 'b-type11', code: `<hzx-border type="b-type11"> hzx-border </hzx-border>` },
        { type: 'b-type12', code: `<hzx-border type="b-type12"> hzx-border </hzx-border>` },
        { type: 'b-type13', code: `<hzx-border type="b-type13"> hzx-border </hzx-border>` }
      ]
    }
  },
  methods: {
    setItemBg() {
      const r = Math.floor(Math.random() * 10 + 220)
      const g = Math.floor(Math.random() * 10 + 220)
      const b = Math.floor(Math.random() * 10 + 220)
      return `rgb(${r},${g},${b})`
    },
    copy(e, text) {
      const clipboard = new Clipboard(e.target, { text: () => text })
      clipboard.on('success', (e) => {
        window.alert('复制成功')
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        window.alert('复制失败')
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.onClick(e)
    }
  }
}
</script>
<style lang="less" scoped>

.wrap{
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  display: flex;
  .item-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 48%;
      height: 300px;
      display: flex;
      margin: 1%;
      border: 1px solid #cfd4dc;
      border-radius: 10px;
      position: relative;
      .item-cover{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#fff;
        opacity:0.7;
        // background-color: rgb(0,0,0,0.5);
        animation: appear .5s ease;
        .item-cover-content{
          width: 80%;
          background-color: rgb(35 35 35);
          padding: 20px;
          border-radius: 10px;
          color:#fff;
          opacity:1;
          animation: scale .5s ease;
        }
      }
    }
    .item:hover{
      cursor: pointer;
    }
  }
}
 @keyframes appear{
    from{opacity: 0;}
    to{opacity: 0.7;}
 }
 @keyframes scale{
    from{transform:scale(0);}
    to{transform:scale(1);}
 }
</style>
